<template>
  <div class="footer animated fadeInUp">
    <div class="footer-main">
      <el-row class="footer-top">
        <span class="copyright">© 2017 – <span class="copyrightYear">{{curYear}}</span></span>
        <span class="with-love" id="animate"><i class="iconfont icon-heart"></i></span>
        <span class="author" itemprop="copyrightHolder">Mr.yong</span>
        <span class="post-meta-divider">|</span>
        <span class="post-meta-item-icon"><i class="iconfont icon-area-chart"> 站点字数合计:</i></span>
        <span title="站点总字数">171k</span>
        <span class="post-meta-divider">|</span>
        <span><i class="iconfont icon-beian"></i><a href="http://www.miit.gov.cn/" rel="noopener" target="_blank"> 粤ICP备18005467号 </a></span>
      </el-row>
      <el-row class="footer-middle">
        <div class="run_time" style=" text-align:center;">
          <span id="timeDate">本站已安全运行 {{timeDate}} 天 </span><span id="times">{{times}}</span>
        </div>
      </el-row>
      <el-row>
        <div class="busuanzi-count" style=" text-align:center;">
          <span class="post-meta-item-icon"> <i class="iconfont icon-user"></i></span>
          <span class="site-uv" title="总访客量"><span class="busuanzi-value" id="busuanzi_value_site_uv">18199</span> 人</span>
          <span class="post-meta-divider">|</span>
          <span class="post-meta-item-icon"><i class="iconfont icon-eye"></i></span>
          <span class="site-pv" title="总访问量"><span class="busuanzi-value" id="busuanzi_value_site_pv">45048</span> 次</span>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import {record} from '@/api/api';
import $ from 'jquery';
let _this = this;
let now =new Date();
export default {
  name: "Footer",
  data() {
    return {
        timeDate:0,
        times:'00 小时 00 分 00 秒',
        curYear:2020
    };
  },
  mounted(){
    _this = this;
    _this.runTime()
    _this.timer()
    _this.record()
    _this.mouseEffects()
  },
  created(){
    _this.curYear = now.getFullYear();
  },
  methods:{
    timer(){
      return setInterval(()=>{
        _this.runTime()
      }, 500)
    },
    destroyed() {
      clearInterval(this.timer)
    },
    runTime(){
      let grt = new Date("12/01/2017 00:00:00");
          now.setTime(now.getTime() + 250);
      let days = (now - grt ) / 1000 / 60 / 60 / 24;
      let dnum = Math.floor(days);
      let hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
      let hnum = Math.floor(hours);

      if(String(hnum).length == 1 ){
        hnum = "0" + hnum;
      } 
      let minutes = (now - grt ) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
      let mnum = Math.floor(minutes);
      if(String(mnum).length == 1 ){
        mnum = "0" + mnum;
      } 
      let seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      let snum = Math.round(seconds);
      if(String(snum).length == 1 ){
        snum = "0" + snum;
      } 
      _this.timeDate = dnum;
      _this.times =  hnum + " 小时 " + mnum + " 分 " + snum + " 秒"
    },
    record(){
      let y_time = _this.$globalFunc.getCookie('y_time');
      var now = new Date();
      var now_time = now.getTime();
      if(y_time == null){
        let params = {
          os  : _this.$globalFunc.getOS(),
          explore :_this.$globalFunc.getExplore(),
          lang :_this.$globalFunc.getLang(),
          //ip : window.returnCitySN['cip'],
          //address :window.returnCitySN['cname'],
        }
        record(params).then(res=>{
          if(res.code == 200){
            _this.$globalFunc.setCookie('y_time', now_time, 3600);
          }
        })
      }
    },
    mouseEffects(){
      var a_idx = 0;
      $(document).ready(function($) {
        $("body").click(function(e) {
          var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
          var $i = $("<span></span>").text(a[a_idx]);
              a_idx = (a_idx + 1) % a.length;
          var x = e.pageX,
              y = e.pageY;
              $i.css({
                "z-index": 9999999,
                "top": y - 20,
                "left": x,
                "font-size":"12px",
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
              });
              $("body").append($i);
              $i.animate({"top": y - 180,"opacity": 0}, 1500, function() {$i.remove();});
        });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.footer
  padding 10px 0
  background-color #ffffff
  width 100%
	color #000
  display flex
  justify-content center
.footer >>> .footer-main
  width 65%
  margin 0 auto
  font-size 14px
  .icon-beian
    color #0649d0
  .el-row
    width 100%
    text-align center
    padding 5px 0
    .with-love
      padding 0 3px
      color #ff0000
    .post-meta-divider
      padding 0 5px
#animate 
  animation iconAnimate 1.33s ease-in-out infinite
  display inline-block
  @keyframes iconAnimate 
    0%, 100% 
      transform: scale(1)
    10%, 30% 
      transform: scale(0.9)
    20%, 40%, 60%, 80% 
      transform: scale(1.1)
    50%, 70% 
      transform: scale(1.1)
  

</style>
